<template>
	<div class="pj">
		<div class="pj-top" v-for='(v,i) in tops' :key="i">
			<div class="t-left">
				<span>
					{{v.pf}}
				</span>
				<span>综合评价</span>
				<span>高于周边商家{{v.gy}}</span>
			</div>
			<div class="t-right">
				<p class="attitude" v-for='(s,a) in v.rit' :key="a">
					<span>{{s.sp1}}</span>
					<span v-if="s.img"><img :src="s.img"></span>
					<span v-if="s.pf">{{s.pf}}</span>
				</p>
			</div>
		</div>
		<section class="se">
			<ul class="se-top">
				<li>
					全部()
				</li>
				<li>
					满意()
				</li>
				<li>
					不满意()
				</li>
				<li>
					有图()
				</li>
			</ul>
			<div class="se-bottom">
				<div class="pilun" v-for="(v,d) in yh" :key="d">
					<div class="pl-left">
						<img :src="v.img">
					</div>
					<div class="pl-right">
						<div class="ce-top">
							<span>{{v.user}}</span><span>{{v.time}}</span>
						</div>
						<div class="ce-center">
							<img :src="v.xj" height="21" width="98">
						</div>
						<div class="ce-bottom">
							<div v-if="v.ptu" class="ce-tu">
								<span>
									<img :src="v.ptu">
								</span>
							</div>
							<div class="ce-cp">
								<span v-for="(a,x) in v.dx" :key="x">{{a}}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
	</div>
</template>
<script>
export default {
	data() {
		return{
			tops:[
				{
					pf:4.8,
					gy:"79.8%",
					rit:[
						{
							sp1:"服务态度",
							img:"../../static/images/xing.png",
							pf:"5.0",
						},
						{
							sp1:"菜品评价",
							img:"../../static/images/xing.png",
							pf:4.7,
						},
						{
							sp1:"服务态度",
							pf:"32分钟"
						}
					]
				}
			],
			yh: [
				{
					img:"https://fuss10.elemecdn.com/c/f5/d0b0f2fc83f3ac3e4a0cfae891256png.png?imageMogr/format/webp/thumbnail/!60x60r/gravity/Center/crop/60x60/",
					user:"匿名用户",
					time:"2017-10-26",
					xj:"../../static/images/xing.png",
					dx: [
						"巧克力旋..",
						"巧克力旋..",
						"巧克力旋..",
						"巧克力旋.."
					],
					index:0,
					remark:"0代表满意"
				},
				{
					img:"https://fuss10.elemecdn.com/c/f5/d0b0f2fc83f3ac3e4a0cfae891256png.png?imageMogr/format/webp/thumbnail/!60x60r/gravity/Center/crop/60x60/",
					user:"匿名用户",
					time:"2017-10-26",
					xj:"../../static/images/xing.png",
					dx: [
						"巧克力旋..",
						"巧克力旋..",
						"巧克力旋..",
						"巧克力旋.."
					],
					index:0,
					remark:"0代表满意"
				},
				{
					img:"https://fuss10.elemecdn.com/c/f5/d0b0f2fc83f3ac3e4a0cfae891256png.png?imageMogr/format/webp/thumbnail/!60x60r/gravity/Center/crop/60x60/",
					user:"匿名用户",
					time:"2017-10-26",
					xj:"../../static/images/xing.png",
					dx: [
						"巧克力旋..",
						"巧克力旋..",
						"巧克力旋..",
						"巧克力旋.."
					],
					index:0,
					remark:"0代表满意"
				},
				{
					img:"https://fuss10.elemecdn.com/c/f5/d0b0f2fc83f3ac3e4a0cfae891256png.png?imageMogr/format/webp/thumbnail/!60x60r/gravity/Center/crop/60x60/",
					user:"匿名用户",
					time:"2017-10-26",
					xj:"../../static/images/xing.png",
					dx: [
						"巧克力旋..",
						"巧克力旋..",
						"巧克力旋..",
						"巧克力旋..",
						"巧克力旋..",
						"巧克力旋..",
						"巧克力旋..",
						"巧克力旋.."
					],
					index:1,
					remark:"1代表不满意"
				},
				{
					img:"https://fuss10.elemecdn.com/c/f5/d0b0f2fc83f3ac3e4a0cfae891256png.png?imageMogr/format/webp/thumbnail/!60x60r/gravity/Center/crop/60x60/",
					user:"匿名用户",
					time:"2017-10-26",
					xj:"../../static/images/xing.png",
					dx: [
						"巧克力旋..",
						"巧克力旋..",
						"巧克力旋..",
						"巧克力旋..",
						"巧克力旋..",
						"巧克力旋.."
					],
					index:1,
					remark:"1代表不满意"
				},
				{
					img:"https://fuss10.elemecdn.com/c/f5/d0b0f2fc83f3ac3e4a0cfae891256png.png?imageMogr/format/webp/thumbnail/!60x60r/gravity/Center/crop/60x60/",
					user:"匿名用户",
					time:"2017-10-26",
					xj:"../../static/images/xing.png",
					ptu:"https://fuss10.elemecdn.com/6/2c/359c6ba8314ad39064ad6ea5a98a0jpeg.jpeg?imageMogr/format/webp/thumbnail/!142x142r/gravity/Center/crop/142x142/",
					dx: [
						"巧克力旋..",
						"巧克力旋.."
					],
					index:2,
					remark:"2代表有图"
				},
				{
					img:"https://fuss10.elemecdn.com/c/f5/d0b0f2fc83f3ac3e4a0cfae891256png.png?imageMogr/format/webp/thumbnail/!60x60r/gravity/Center/crop/60x60/",
					user:"匿名用户",
					time:"2017-10-26",
					xj:"../../static/images/xing.png",
					dx: [
						"巧克力旋..",
						"巧克力旋..",
						"巧克力旋..",
						"巧克力旋..",
						"巧克力旋..",
						"巧克力旋.."
					],
					index:2,
					remark:"2代表不满意"
				},
				{
					img:"https://fuss10.elemecdn.com/c/f5/d0b0f2fc83f3ac3e4a0cfae891256png.png?imageMogr/format/webp/thumbnail/!60x60r/gravity/Center/crop/60x60/",
					user:"匿名用户",
					time:"2017-10-26",
					xj:"../../static/images/xing.png",
					ptu:"https://fuss10.elemecdn.com/6/2c/359c6ba8314ad39064ad6ea5a98a0jpeg.jpeg?imageMogr/format/webp/thumbnail/!142x142r/gravity/Center/crop/142x142/",
					dx: [
						"巧克力旋..",
						"巧克力旋..",
						"巧克力旋..",
						"巧克力旋..",
						"巧克力旋..",
						"巧克力旋..",
						"巧克力旋..",
						"巧克力旋.."
					],
					index:2,
					remark:"2代表不满意"
				},
				{
					img:"https://fuss10.elemecdn.com/c/f5/d0b0f2fc83f3ac3e4a0cfae891256png.png?imageMogr/format/webp/thumbnail/!60x60r/gravity/Center/crop/60x60/",
					user:"匿名用户",
					time:"2017-10-26",
					xj:"../../static/images/xing.png",
					dx: [
						"巧克力旋..",
						"巧克力旋..",
						"巧克力旋..",
						"巧克力旋..",
						"巧克力旋..",
						"巧克力旋.."
					],
					index:1,
					remark:"1代表不满意"
				}
			]
		}
	}
}
</script>
<style lang="less">
.pxToRem(@p,@px){
    @{p}: @px / 75 * 1rem;
}
.pj{
	width: 100%;
	height: 94vh;
	overflow: auto;
	.pj-top{
		background: #fff;
		box-sizing: border-box;
		.pxToRem(padding,30);
		display: flex;
		.t-left{
			.pxToRem(width,180);
			.pxToRem(padding-right,30);
			border-right: 1px solid #ddd;
			display: flex;
			flex-direction:column;
			span{
				text-align: center;
				&:nth-child(1){
					color: #ff6000;
					font-weight: bold;
					.pxToRem(font-size,40);
				}
				&:nth-child(2){
					.pxToRem(margin-top,10);
					.pxToRem(font-size,22);
				}
				&:nth-child(3){
					color: #999;
					.pxToRem(margin-top,10);
					.pxToRem(font-size,18);
				}
			}
		}
		.t-right{
			flex:1;
			.pxToRem(margin-left,30);
			color: #666;
			.attitude{
				.pxToRem(height,45);
				.pxToRem(font-size,25);
				display: flex;
				span{
					.pxToRem(margin-right,20);
				}
			}
		}
	}
	.se{
		width: 100%;
		.pxToRem(margin-top,20);
		background: #fff;
		box-sizing: border-box;
		.pxToRem(padding,30);
		.se-top{
			width: 100%;
			display: flex;
			border-bottom: 1px solid #ddd;
			.pxToRem(padding-bottom,30);
			li{
				.pxToRem(padding-top,10);
				.pxToRem(padding-bottom,10);
				.pxToRem(padding-left,18);
				.pxToRem(padding-right,18);
				.pxToRem(border-radius,4);
				.pxToRem(margin-right,18);
				&:nth-child(1){
					background: #0097ff;
					color: #fff;
				}
				&:nth-child(2){
    				background-color: #ebf5ff;
					color: #6d7885;
				}
				&:nth-child(3){
					background-color: #f5f5f5;
					color: #aaa;
				}
				&:nth-child(4){
					background-color: #ebf5ff;
					color: #6d7885;
				}
			}
		}
		.se-bottom{
			width: 100%;
			display: flex;
			flex-direction:column;
			.pilun{
				display: flex;
				.pxToRem(padding-bottom,30);
				.pxToRem(padding-top,30);
				border-bottom: 1px solid #ddd;
				&:last-child{
					border:none;
				}
				.pl-left{
					.pxToRem(width,90);
				}
				.pl-right{
					flex:1;
					display: flex;
					flex-direction:column;
					.ce-top{
						width: 100%;
						span{
							&:nth-child(1){
								color: #333;
								.pxToRem(font-size,30);
							}
							&:nth-child(2){
								.pxToRem(margin-left,10);
								color: #bbb;
								.pxToRem(font-size,24);
							}
						}
					}
					.ce-center{
						.pxToRem(margin-top,10);
					}
					.ce-bottom{
						width: 100%;
						.ce-tu{

						}
						.ce-cp{
							.pxToRem(margin-top,10);
							display: flex;
							flex-wrap:wrap;
							span{
								.pxToRem(width,120);
								.pxToRem(padding-top,18);
								.pxToRem(padding-bottom,18);
								.pxToRem(padding-left,20);
								.pxToRem(padding-right,20);
								.pxToRem(margin-right,18);
								border:1px solid #eee;
								.pxToRem(font-size,24);
								.pxToRem(margin-top,10);
							}
						}
					}
				}
			}
		}
	}
}
</style>